<script setup>
import { ref, onMounted } from 'vue';
import { queryAllApi } from '@/api/user';

// 定义表格响应式数据
const tableData = ref([]);
//查询表单数据
const user=ref({
    username:'',
    name:'',
    status: ''
})

const query = async () => {
    // 使用axios直接请求数据
    // const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    // tableData.value = response.data;
    // if(response.data.code === 1){
    //     tableData.value = response.data.data;
    // }
    // 使用封装的API接口查询数据
    const result = await queryAllApi(user.value.name, user.value.username, user.value.status);
    if (result.code === 1) {
        console.log("查询成功");
        tableData.value = result.data;
    }
};

const reset = () => {
    // 重置查询表单
    user.value = {
        username: '',
        name: '',
        status: ''
    };
    query();
};

// 组件加载时查询数据
onMounted(() => {
    query();
});



</script>

<template>
    <h1>用户查询列表</h1>
    <div id="container">
        <el-form :inline="true" :model="user" class="form-inline">
            <el-form-item label="姓名">
                <el-input v-model="user.name" placeholder="请输入姓名" clearable />
            </el-form-item>
            
            <el-form-item label="用户名">
                <el-input v-model="user.username" placeholder="请输入用户名" clearable />
            </el-form-item>

            <el-form-item label="账户状态">
                <el-select v-model="user.status" placeholder="请选择" clearable>
                    <el-option label="正常" value="1" />
                    <el-option label="封禁" value="0" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
                <el-button type="danger" @click="reset">清空</el-button>
            </el-form-item>

        </el-form>
        
        <el-table :data="tableData" height="250" style=" width: 100%">
            <el-table-column prop="userId" label="ID" width="180"/>
            <el-table-column prop="userName" label="用户名" width="180"/>
            <el-table-column prop="imageUrl" label="头像" width="180">
                <template #default="scope">
                    <img :src="scope.row.imageUrl" alt="头像" style="width: 50px; height: 50px; border-radius: 50%;">
                </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180"/>
            <el-table-column prop="status" label="账户状态" width="180">
                <template #default="scope">
                    <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                        {{ scope.row.status === 1 ? '正常' : '封禁' }}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style scoped>
.form-inline .el-input {
  --el-input-width: 220px;
}

.form-inline .el-select {
  --el-select-width: 220px;
}
</style>